<template>
	<view class="content">
		<view class="top-bg">
			<image class="icon-back" style="width:100%;height:100%;" src="@/static/image/top-bg.png"
				mode="widthFix">
			</image>
			<view class="r-nw-fs-c" style="position:relative"
				:style="{'height':navBarHeight + 'px', 'marginTop': statusBarHeight + 'px'}">
				<image class="icon-back" src="@/static/image/back.png" mode="widthFix" @click="goToBack()">
				</image>
				<text class="page-title">订单详情</text>
			</view>
		</view>
		<scroll-view scroll-y :style="{'height': (systemHeight - 170) + 'px'}" class="scroll-y-box">
			<uni-card style="margin-top: 198rpx;">
				<view class="basic-info r-nw-sb-c">
					<view class="info-text">
						<text class="name">{{detail.name || ''}}</text>
						<text class="dec">{{detail.describe || ''}}</text>
					</view>
					<image class="image" v-if="(detail.cover || '').length > 0" :src="detail.cover" mode="aspectFit"></image>
				</view>
				<view class="address-box">
					<view class="title">取车地点</view>
					<view class="address">{{detail.city || ''}}&nbsp;{{detail.address || ''}}</view>
				</view>
<!-- 				<view class="address-box pick-time r-nw-sb-c">
					<view class="time-box">
						<view class="title">取车时间</view>
						<view class="time address">{{detail.start_date}} - {{detail.end_date}}</view>
					</view>
					<view class="total c-c-c">共 {{detail.day}} 天</view>
				</view> -->
				<view class="address-box pick-time ">
					<view class="time-box r-nw-sb-c">
						<view class="title">取车时间</view>
						<view class="total c-c-c">共 {{detail.day || ''}} 天</view>
					</view>
					<view class="time address">{{detail.start_date || ''}} - {{detail.end_date || ''}}</view>
				</view>
			</uni-card>
			<!-- 租车人 -->
			<uni-card style="margin-top: 20rpx;">
				<view class="r-nw-sb-c top">
					<view class="top-left r-nw-fs-c">
						<image class="user-icon" src="../../static/image/user.png" mode="aspectFit"></image>
						<text class="user">租车人</text>
					</view>
					<view class="top-right r-nw-fs-c" @click="goTotenantry">
						<image class="add-circle-icon user-icon" src="../../static/image/add-circle.png"
							mode="aspectFit"></image>
						<text class="add-circle user">添加承租人</text>
					</view>
				</view>
				<view v-show="(detail.lessees || '').length > 0">
					<scroll-view class="user-box" scroll-x>
						<view class="r-nw-fs-c">
							<view class="user-item c-c-c" v-for="(item, index) in detail.lessees || []" :key="index"
								@click="changeLessees(index, item)" :class="{'user-active': currentUserIndex === index}">
								{{item.name}}
							</view>
						</view>
					</scroll-view>
					<uni-forms ref="valiForm" label-width="190rpx" :modelValue="detail.lessees[currentUserIndex]" >
						<uni-forms-item label="姓名" required name="name">
							<uni-easyinput v-model="detail.lessees[currentUserIndex].name" clearable placeholder="请输入姓名" />
						</uni-forms-item>
						<uni-forms-item label="手机号" required name="phone">
							<uni-easyinput v-model="detail.lessees[currentUserIndex].phone" type="number" placeholder="请输入手机号" />
						</uni-forms-item>
						<uni-forms-item label="身份证号" required name="id_card">
							<uni-easyinput  v-model="detail.lessees[currentUserIndex].id_card" placeholder="请输入身份证号" />
						</uni-forms-item>
					</uni-forms>
				</view>
				<view style="margin-top: 20rpx;" v-show="(detail.lessees || '').length == 0">
					暂无承租人信息，请添加
				</view>
			</uni-card>
			<!-- 费用明细 -->
			<uni-card class="card-box" style="margin-top: 20rpx;">
				<view class="r-nw-fs-c">
					<image style="width: 44rpx;height: 44rpx;" src="../../static/image/expense-icon.png" mode="aspectFit"></image>
					<text class="title">费用明细</text>
				</view>
				<view class="explain-text r-nw-sb-c">
					<text class="explain">租赁费用</text>
					<text class="text">￥{{orderPrices.car_price || 0}}</text>
				</view>
				<!-- <view class="explain-text r-nw-sb-c">
					<text class="explain">清洁费</text>
					<text class="text">{{detail.cleaning_fee || 0}}</text>
				</view> -->
				<view class="explain-text r-nw-sb-c">
					<text class="explain">服务费</text>
					<text class="text">{{detail.service_fee || 0}}</text>
				</view>
				<view class="explain-text r-nw-sb-c">
					<text class="explain" style="color: #333;">总价</text>
					<text class="text" style="font-weight: 600;">{{detail.total_price || 0}}</text>
				</view>
			</uni-card>
			<!-- 出行保障 -->
			<uni-card style="margin-top: 20rpx;" class="top">
				<view class="top-left r-nw-fs-c">
					<image class="user-icon" src="../../static/image/out.png" mode="aspectFit"></image>
					<text class="user">出行保障</text>
				</view>
				<scroll-view scroll-x="" style="margin-top: 24rpx;">
					<view class="r-nw-fs-fs">
						<view class="service-box c-c-c-">
							<view class="title c-c-c">服务内容</view>
							<image class="icon" src="" mode=""></image>
							<view class="text1 c-c-c">
								<view class="text-1-1"></view>
								车损保障
							</view>
							<view class="text2 c-c-c">三者保障</view>
							<view class="text2 c-c-c">乘客保障</view>
							<view class="text2 c-c-c">免折旧费</view>
							<view class="text2 c-c-c">无需垫付</view>
							<view class="text2 c-c-c">免停运费</view>
							<view class="text2 c-c-c text3">价格
								<view></view>
							</view>
							<view class="raido-box"></view>
						</view>
						<view class="service-box c-c-c-">
							<!-- <view class="detail-tag c-c-c" :style="{backgroundColor: '#09B8A9'}" @click="slectDetail(index)"></view> -->
							<view class="title c-c-c ellipsis" :style="{color: '#09B8A9'}">基础保险</view>
							<view class="c-c-c" style="margin-bottom: 20rpx;">
								<image class="icon" src="@/static/image/icon3.png" mode="aspectFit"></image>
							</view>
							<view class="text1 c-fs-c">
								<text class="text-1-1"></text>
								1500元以内自付
							</view>
							<view class="text2 c-c-c">20万</view>
							<view class="text2 c-c-c"></view>
							<view class="text2 c-c-c">
								<!-- <image class="icon1" src="@/static/image/error.png" mode="aspectFit"></image> -->
								车损1000以下免收
							</view>
							<view class="text2 c-c-c">
								<image class="icon1" src="@/static/image/error.png" mode="aspectFit"></image>
							</view>
							<view class="text2 c-c-c">
								<image class="icon1" src="@/static/image/error.png" mode="aspectFit"></image>
							</view>
							<view class="text2 text3">
								<text class="price" :style="{color: '#09B8A9'}">￥{{detail.order_base_insure_fee}}</text>/天
								<!-- <view class="original-price">￥{{orderPrices.base_insure_fee || 0}}</view> -->
							</view>
							<view class="raido-box c-c-c">
								<uni-icons type="checkbox-filled" color="#ff2211" size="32"></uni-icons>
							</view>
						</view>
						<view class="service-box c-c-c-" v-for="(item, index) in detail.insurances" :key="item.id">
							<view class="detail-tag c-c-c" :style="{backgroundColor: item.level === 3 ? '#EC2F12' : item.level === 2 ?' #E5820B' : '#09B8A9'}" @click="slectDetail(index)">详情</view>
							<view class="title c-c-c ellipsis" :style="{color: item.level === 3 ? '#EC2F12' : item.level === 2 ?' #E5820B' : '#09B8A9'}">{{item.name}}</view>
							<view class="c-c-c" style="margin-bottom: 20rpx;">
								<image class="icon" src="@/static/image/icon1.png" mode="aspectFit" v-if="item.level === 3"></image>
								<image class="icon" src="@/static/image/icon2.png" mode="aspectFit"  v-else-if="item.level === 2"></image>
								<image class="icon" src="@/static/image/icon3.png" mode="aspectFit"  v-else></image>
							</view>
							<view class="text1 c-fs-c">
								<text class="text-1-1">{{item.containcar_damage}}</text>
								{{item.car_damage_sub}}
							</view>
							<view class="text2 c-c-c">{{item.tripartite}}</view>
							<view class="text2 c-c-c">{{item.passenger}}</view>
							<view class="text2 c-c-c">
								<image class="icon1" src="@/static/image/success.png" mode="aspectFit" v-if="item.free_depreciation === 1"></image>
								<image class="icon1" src="@/static/image/error.png" mode="aspectFit" v-else></image>
							</view>
							<view class="text2 c-c-c">
								<image class="icon1" src="@/static/image/success.png" mode="aspectFit" v-if="item.no_need_advance === 1"></image>
								<image class="icon1" src="@/static/image/error.png" mode="aspectFit" v-else></image>
							</view>
							<!-- <view class="text2 c-c-c">
								<text v-if="item.stoppage">{{item.stoppage}}</text>
								<image class="icon1" src="@/static/image/error.png" mode="aspectFit" v-else></image>
							</view> -->
							<view class="text2 c-c-c">
								<image class="icon1" src="@/static/image/success.png" mode="aspectFit" v-if="item.free_outage === 1"></image>
								<image class="icon1" src="@/static/image/error.png" mode="aspectFit" v-else></image>
							</view>
							
							<view class="text2 text3">
								<text class="price" :style="{color: item.level === 3 ? '#EC2F12' : item.level === 2 ?' #E5820B' : '#09B8A9'}">￥{{item.price}}</text>/天
								<view class="original-price">￥{{item.original_price}}</view>
							</view>
							<view class="raido-box c-c-c">
								<uni-icons @tap="changeInsurance(item.id)" :type="currentService.id == item.id ? 'checkbox-filled' : 'circle'" :color="currentService.id == item.id ? '#ff2211' : '#bcbcbc'" size="32"></uni-icons>
							</view>
						</view>
					</view>
				</scroll-view>
			</uni-card>
			<!-- 租车提示 -->
			<view class="bottom-tips">
				<view class="title">用车须知</view>
				<view class="tips"><rich-text :nodes="detail.instructions_for_car_use"></rich-text></view>
			</view>
			<view class="bottom-tips">
				<view class="title">租车必读</view>
				<view class="tips"><rich-text :nodes="detail.car_rental_must_read"></rich-text></view>
			</view>
		</scroll-view>
		<view class="bottom-box r-nw-sb-c">
			<view class="price-box c-fs-c">
				<view class="price">
					￥<text class="price-total">{{totalPrice}}</text>
				</view>
				<view class="desc">在线支付</view>
			</view>
			<view class="price-detail-btn">
				<text @tap="showPriceDetail">价格明细</text>
				<uni-icons :type="showPriceDetailStatus ? 'up' : 'down'" color="#999" ></uni-icons>
			</view>
			<button class="payment r-nw-c-c" @click="goTopay" :loading="loading">
				去支付
			</button>
		</view>
		<!-- 弹框 -->
		<view class="popup fadelogIn" v-if="isPopupShow">
			<view class="popup-detail">
				<view class="popup-title">
					<text class="title">{{detail.insurances[insurancesDetailIndex].name}}</text>
					<image class="close-icon" src="../../static/image/error.png" mode="aspectFit" @click="isPopupShow = false"></image>
				</view>
				<rich-text style="margin-top: 56rpx;" :nodes="detail.insurances[insurancesDetailIndex].detail"></rich-text>
			</view>
		</view>
		<uni-popup ref="priceDetailPopup" type="bottom" border-radius="10px 10px 0 0" @change="priceDetailChange">
			<view class="price-detail-container">
				<view class="title">
					价格详情
				</view>
				<view class="item-title">
					车辆租赁费用
					<text class="sub-total">￥{{orderPrices.car_price}}</text>
				</view>
				<view class="prices_calendar">
					<view class="prices_calendar_item" v-for="val,key in detail.prices_calendar" :key="key">
						<view class="date">{{key}}</view>
						<view class="price">￥{{val}}</view>
					</view>
				</view>
				<view class="item-title">
					保险以及服务费
				</view>
				<view class="price-item">
					<view class="label">
						基础保险费
					</view>
					<view class="price">
						<text class="tips">￥{{detail.order_base_insure_fee}} * {{detail.day}}天 =</text>
						<text class="bold">
							￥{{orderPrices.base_insure_fee}}
						</text>
					</view>
				</view>
				<view class="price-item" v-if="currentService.id">
					<view class="label">
						增值出行保障
					</view>
					<view class="price">
						<text class="tips">￥{{currentService.price}} * {{detail.day}}天 =</text>
						<text class="bold">
							￥{{orderPrices.insure_fee}}
						</text>
					</view>
				</view>
				<view class="price-item" v-if="orderPrices.service_fee">
					<view class="label">
						服务费
					</view>
					<view class="price">
						<text class="bold">
							￥{{orderPrices.service_fee}}
						</text>
					</view>
				</view>
				<view class="price-item" v-if="orderPrices.cleaning_fee">
					<view class="label">
						清洁费
					</view>
					<view class="price">
						<text class="bold">
							￥{{orderPrices.cleaning_fee}}
						</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { ordersConfirm, orders, lessees, getLessees, payParameter } from '@/utils/api.js';
	import { throttle } from "@/utils/public.js";
	const app = getApp();
	export default {
		data() {
			return {
				navBarHeight: app.globalData.navBarHeight,
				statusBarHeight: app.globalData.statusBarHeight,
				currentUserIndex: 0, // 承租人index
				currentService: {},
				isPopupShow: false,
				orderPrices: {
					'base_insure_fee': 0,
					'insure_fee': 0,
					'car_price': 0,
					'cleaning_fee': 0,
					'service_fee': 0
				},
				totalPrice: 0, // 总价
				// 校验规则
				infoRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '手机号'
						},
						{
							validateFunction: function(rule, value, data, callback) {
								let telReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
								if(telReg.test(value)) {
									callback()
								} else {
									callback('请输入正确的手机号')
								}
							}
						}
						]
					},
					id_card: {
						rules: [{
								required: true,
								errorMessage: '身份证不能为空'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									let _IDRe18 = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
									let _IDre15 =  /^[1-9]\d{5}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
									if( _IDRe18.test(value) || _IDre15.test(value) ) {
										// 验证通过
										callback();
									} else {
										// 验证不通过
										callback('请输入正确的身份号')
									}
								}
							}
						]
					}
				},
				card_id:  '', // 车id
				start_at: '',
				end_at: '',
				detail: {},
				city: '',
				lessee_id: '', // 承租人id
				insurance_id: '', //保险id
				channel_id: '',
				insurancesDetailIndex: 0,
				systemHeight: 0,
				loading: false,
				showPriceDetailStatus: false
			}
		},
		onLoad(options) {
			this.systemHeight = wx.getSystemInfoSync().windowHeight;
			this.card_id = parseInt(options.id);
			if (process.env.NODE_ENV == 'development') {
				this.card_id = 3;
			}
			this.getStorageData();
		},
		onShow() {
			this.getInfoDetail();
		},
		onReady() {
			this.$refs.valiForm.setRules(this.infoRules);
		},
		methods: {
			// 选择承租人
			changeLessees(index, item) {
				this.currentUserIndex = index;
				this.lessee_id = item.id;
			},
			// 获取订单详情
			getInfoDetail() {
				let data = {
					car_id: this.card_id,
					city:  this.city,
					address: this.address,
					start_at: this.start_at,
					end_at: this.end_at
				};
				uni.showLoading({title: '加载中...'});
				ordersConfirm(data).then(res => {
					if(res.code === 200) {
						let data = res.data;
						data.insurances.forEach(item => {
							item.isChecked = false;
						})
						data.total_price = (data.car_price) + Number(data.service_fee) + Number(data.cleaning_fee);
						this.lessee_id = data.lessees.length > 0 ? data.lessees[0].id : '';
						this.detail = data;
						this.orderPrices.car_price = data.car_price;
						this.orderPrices.cleaning_fee = data.cleaning_fee;
						this.orderPrices.service_fee = data.service_fee;
						this.sumUp();
						uni.hideLoading();
					}
				})
				.catch(err => { 
					uni.hideLoading(); 
				})
			},
			// 计算总价
			sumUp() {
				let totalPrice = 0
				// 租金
				totalPrice += Number(this.detail.car_price)
				// 服务费
				totalPrice += Number(this.detail.service_fee)
				// 清洁费
				totalPrice += Number(this.detail.cleaning_fee)
				// 基础保险费
				this.orderPrices.base_insure_fee = Number(this.detail.order_base_insure_fee * this.detail.day)
				totalPrice += this.orderPrices.base_insure_fee
				// 增值保险服务费
				if(this.currentService.id) {
					totalPrice += Number(this.currentService.price * this.detail.day);
					this.orderPrices.insure_fee = Number(this.currentService.price * this.detail.day);
				} else {
					this.orderPrices.insure_fee = 0;
				}
				// this.detail.insurances.forEach((item) => {
				// 	if(item.isChecked) {
				// 		totalPrice += Number(item.price * this.detail.day);
				// 		this.orderPrices.insure_fee = Number(item.price * this.detail.day);
				// 	}
				// })
				this.totalPrice = totalPrice
			},
			// 保险详情
			slectDetail(index) {
				this.insurancesDetailIndex = index;
				this.isPopupShow = true
			},
			// 选择保险
			changeInsurance(id) {
				if(this.insurance_id !== id) {
					this.insurance_id = id;
					const serverice_item = this.detail.insurances.find(p => p.id == id);
					this.currentService = serverice_item.id == this.currentService.id ? {} : {...serverice_item};
				} else {
					this.insurance_id = "";
					this.currentService = {};
				}
				this.sumUp()
			},
			//  添加承租人
			goTotenantry() {
				let obj = {
					name:'',
					phone:'',
					id_card:'',
					isAdd: 1
				}
				uni.navigateTo({
					url: `/pages/about/editTenantry?name=${obj.name}&phone=${obj.phone}&id_card=${obj.id_card}&is_add=${obj.isAdd}`
				});
			},
			// 去支付
			goTopay() {
				this.$refs['valiForm'].validate().then(res => {
					// if(!this.insurance_id) {
					// 	return uni.showToast({
					// 		icon: 'none',
					// 		title: '请选择保险'
					// 	})
					// }
					this.submitLessees();
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: '租车人信息未填写完整'
					})
				})
			},
			// 提交承租人信息
			submitLessees() {
				if(this.loading) {
					uni.showToast({
						icon: 'none',
						title: '请勿重复提交'
					})
					return;
				}
				this.loading = true;
				lessees(this.detail.lessees[this.currentUserIndex]).then(res => {
					if(res.code === 200) {
						// 订单创建
						this.changeToPay();
					}
				})
			},
			// 立即支付
			changeToPay() {
				let data = {
					car_id: this.card_id,
					city: this.city,
					address: this.detail.address,
					start_at: this.start_at,
					end_at: this.end_at,
					channel_id: this.channel_id,
					lessee_id: this.lessee_id ,
					insurance_id: this.insurance_id,
					total_price: this.totalPrice
				}
				// 创建订单
				orders(data).then(success => {
					if (success.code === 200 ) {
						// 获取支付参数
						payParameter(success.data.id).then(res => {
							if(res.code === 200) {
								this.loading = false;
								let paymentData = res.data;
								uni.requestPayment({
									provider: 'wxpay',//wxpay微信 alipay支付宝
									timeStamp: paymentData.timeStamp,
									nonceStr: paymentData.nonceStr,
									package: paymentData.package,
									signType: paymentData.signType,
									paySign: paymentData.paySign,
									success: function(res) {
										uni.showToast({title: '支付成功', icon: 'none'});
										uni.switchTab({
											url: '/pages/order/order'
										})
									},
									// 参数有问题则抛出错误
									fail: function(err) {
										console.log('err', err)
										uni.showToast({title: '支付失败', icon: 'none'})
									},
								})
							}
						})
						setTimeout(() => {
							this.loading = false;
						}, 2000)
					}
				})
			},
			goToBack() {
				uni.navigateBack()
			},
			// 获取缓存
			getStorageData() {
				this.start_at = uni.getStorageSync('start_at');
				this.end_at = uni.getStorageSync('end_at');
				// if (process.env.NODE_ENV == 'development') {
				// 	this.start_at = '1727540831';
				// 	this.end_at = '1727886431';
				// }
				this.channel_id = uni.getStorageSync('channel_id');
				this.address = uni.getStorageSync('address');
				this.city = uni.getStorageSync('city');
			},
			priceDetailChange(e){
				this.showPriceDetailStatus = e.show
			},
			showPriceDetail(){
				this.showPriceDetailStatus = !this.showPriceDetailStatus
				if(this.showPriceDetailStatus) {
					this.$refs.priceDetailPopup.open();
				} else {
					this.$refs.priceDetailPopup.close();
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F6F8;
	}
	/deep/ .uni-forms-item {
		padding-top: 7px !important;
		margin-bottom: 16rpx !important;
		padding-bottom: 9rpx !important;
		border-radius: 16rpx !important;
	}
	/deep/ .uni-easyinput__content {
		background-color: #F5F6F8 !important;
	}
	/deep/ .uni-forms-item.is-direction-left {
		background: #F5F6F8 !important;
	}
	/deep/ .is-input-border {
		border: 1rpx solid transparent !important;
	}
	/deep/ .uni-forms-item__label {
		padding-left: 32rpx !important;
		font-size: 30rpx;
		color: #666;
	}
	/deep/ .uni-forms-item__error {
		top: 65% !important;
		right: 20rpx !important;
		left: unset !important;
	}
	// /deep/ .uni-icons {
	// 	color: #FF7F00 !important;
	// 	font-size: 20px;
	// }
	/deep/ .content-clear-icon {
		display: none !important;
	}
	/deep/ .uni-easyinput__content-input {
		padding-right: 26rpx;
		text-align: right;
	}
	button {
		margin-left: 0;
		margin-right: 0;
	}
	.card-box {
		.title {
			margin-left: 8rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			line-height: 32rpx;
		}
		.explain-text {
			margin-top: 32rpx;
			.explain {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
			}
			.text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
			}
		}
		.insurance-box {
			margin-top: 26rpx;
			width: 638rpx;
			height: 88rpx;
			background: linear-gradient( 90deg, #FFF7F7 0%, #FFFFFF 100%);
			border-radius: 16rpx 8rpx 0rpx 16rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #EC2F12;
			line-height: 40rpx;
		}
	}
	.uni-card {
		padding: 32rpx 24rpx !important;
		.uni-card__content {
			padding: 0 !important;
		}
	}
	.content {
		position: relative;
		.top-bg {
			position: absolute;
			width: 750rpx;
			height: 488rpx;
		}
		.scroll-y-box {
			position: absolute;
			top: 188rpx;
			z-index: 99;
			.basic-info {
				padding-bottom: 34rpx;
				border-bottom: 4rpx solid #F5F5F5;
				.info-text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 36rpx;
					color: #333333;
					.dec {
						display: block;
						margin-top: 24rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}
				}
				.image {
					width: 219rpx;
					height: 150rpx;
				}
			}
			.address-box {
				padding: 32rpx 0;
				border-bottom: 4rpx solid #F5F5F5;
				.title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
				.address {
					margin-top: 17rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
				}
			}
			.pick-time {
				border-bottom: 0;
				.time {
					margin-top: 12rpx;
					font-weight: 500;
					font-size: 26rpx;
				}
				.total {
					padding: 0 17rpx;
					// width: 110rpx;
					height: 48rpx;
					background: #FFE9C6;
					border-radius: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #783700;
				}
			}
			.top {
				.user-icon {
					width: 36rpx;
					height: 36rpx;
				}
				.user {
					margin-left: 8rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
				}
				.add-circle {
					font-weight: 400;
					font-size: 26rpx;
					color: #3D73FA;
				}
			}
			.user-box {
				margin: 40rpx 0 24rpx;;
				.user-item {
					margin-right: 16rpx;
					padding: 0 10rpx;
					flex-shrink: 0;
					min-width: 128rpx;
					height: 60rpx;
					background: #F5F6F8;
					border: 2rpx solid #F5F6F8;
					border-radius: 8rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}
				.user-active {
					background: #FFEFEC;
					border: 2rpx solid #FF3716;
					color: #FF3616;
				}
			}
			.user-info {
				margin-top: 24rpx;
				padding: 0 32rpx;
				width: 574rpx;
				height: 100rpx;
				background: #F5F6F8;
				border-radius: 16rpx;
				.label {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #999999;
				}
			}
			.bottom-tips {
				margin: 40rpx 30rpx;
				.title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 28rpx;
					color: #333333;
				}
				.tips {
					margin-top: 16rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					line-height: 40rpx;
					white-space: pre-wrap;
				}
			}
			.service-box {
				position: relative;
				margin-right: 20rpx;
				padding: 40rpx 24rpx;
				flex-shrink: 0;
				width: 132rpx;
				// height: 534rpx;
				background: #F5F6F8;
				border-radius: 16rpx;
				.detail-tag {
					position: absolute;
					top: 0;
					right: 0;
					width: 50rpx;
					height: 28rpx;
					background: #EC2F12;
					border-radius: 0rpx 16rpx 0rpx 16rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 18rpx;
					color: #FFFFFF;
				}
				.title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 26rpx;
					color: #333333;
				}
				.icon {
					margin-top: 14rpx;
					width: 32rpx;
					height: 12rpx;
				}
				.icon1 {
					width: 32rpx;
					height: 32rpx;
				}
				.text1 {
					height: 90rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #666666;
					line-height: 1.2;
					.text-1-1 {
						margin-bottom: 4rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
					}
				}
				.text2 {
					height: 55rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #666666;
					line-height: 32rpx;
				}
				.text3 {
					margin-top: 10rpx;
					height: 60rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 18rpx;
					color: #333333;
					text-align: center;
					.price {
						font-size: 24rpx;
						color: #EC2F12;;
					}
					.original-price {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 18rpx;
						color: #999999;
						text-align: center;
					}
				}
				.raido-box {
					margin-top: 42rpx;
					height: 60rpx;
					display: flex; align-items: center;
				}
			}
		}
		.bottom-box {
			padding: 16rpx 45rpx 20rpx 24rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 999;
			width: 681rpx;
			height: 84rpx;
			background: #FFFFFF;
			.price {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-weight: 28rpx;
				color: #F78500;
				.price-total {
					margin-left: 8rpx;
					font-weight: 600;
					font-size: 48rpx;
				}
			}
			.desc {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #999999;
				line-height: 28rpx;
			}
			.payment {
				width: 227rpx;
				height: 88rpx;
				background: linear-gradient(270deg, #FF3315 0%, #FFB034 100%);
				border-radius: 16rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}
			.price-detail-btn {
				flex: 1;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 23rpx;
				padding-left: 30rpx;
				padding-bottom: 26rpx;
				color: #999999;
			}
		}
		.popup{
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			z-index: 999;
			background-color: rgba(0, 0, 0, .6);
			.popup-detail {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 9999;
				background: #FFFFFF;
				padding: 35rpx 40rpx;
				min-height: 500rpx;
				border-radius: 40rpx 40rpx 0rpx 0rpx;
				.popup-title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 36rpx;
					color: #333333;
					text-align: center;
				}
				.close-icon {
					width:32rpx;
					height: 32rpx;
					position: absolute;
					top: 35rpx;
					right: 40rpx;
				}
			}
		}
	}
	.price-detail-container {
		padding: 24rpx 24rpx 140rpx 24rpx;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #333333;
			text-align: center;
		}
		.prices_calendar {
			display: flex; flex-wrap: wrap; border-radius: 12rpx; overflow: hidden;
			.prices_calendar_item {
				width: 20%;background-color: #F5F6F8; padding: 10rpx; box-sizing: border-box;
				.date {
					color: #777; font-size: 24rpx; text-align: center;
				}
				.price { 
					color: #333; font-size: 24rpx; text-align: center;
				}
			}
		}
		.item-title { 
			padding: 24rpx 0;
			font-size: 26rpx;
			font-weight: 600;
			display: flex;
			justify-content: space-between;
		}
		.price-item {
			display: flex; justify-content: space-between; font-size: 24rpx;
			.label { 
				color: #555;
			}
			.price {
				.tips {
					color: #777;
				}
				.bold { color: #333; font-size: 28rpx; font-weight: 700;}
			}
		}
		.price-item + .price-item {
			padding-top: 12rpx;
		}
	}
</style>